<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue的过渡</title>
  </head>
  <style>
    .bad-leave,
    .bad-enter-to {
      opacity: 1;
      transform: rotate(180deg) scale(0.1);
    }

    .bad-leave-to,
    .bad-enter {
      opacity: 0;
      transform: rotate(0) scale(1)
    }

    .bad-leave-active,
    .bad-enter-active {
      transition: 1s opacity linear;
    }
  </style>

  <body>
    <div id="app">
      <button @click="isShow=!isShow">点击切换</button>
      <transition name="bad">
        <img v-show="isShow" src="../img/jianren.jpg" alt="">
      </transition>
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    /* 
    vue使用过渡：
    1.使用transition包裹,在目标元素外包裹<transition name="xxx">
    2.编写样式：
      2.1 进入：
            XXX-enter:进入起始点
            xxx-enter-to:进入结束点
            xxx-enter-active:进入过程中
      2.2 离开：
            XXX-leave:离开起始点
            xxx-leave-to:离开结束点
            xxx-leave-active:离开过程中    
    */
    new Vue({
      el: "#app",
      data() {
        return {
          isShow: true
        }
      }
    })
  </script>

</html>